<!--
 * @description  : 市管-涉案车辆登记组件
 * @descriptionDetail: 市管-涉案车辆登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-09 18:43:02
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="false" title="涉案车辆登记" :customBack="handlerBack">
      <view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">
        确定
      </view>
    </theme-navbar>
    <u-form :model="carForm" style="padding: 0px 10px;" ref="uForm" :error-type="errorType">
      <u-form-item label="车牌号" required prop="carNum" label-position="top" :label-width="180">
        <u-input :custom-style="valueStyle" placeholder="请输入车牌号" :disabled="isDisabled" v-model="carForm.carNum" />
      </u-form-item>
      <u-form-item label="车辆车型" prop="carStyleName" label-position="top" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" placeholder="请选择车辆车型" :disabled="true" v-model="carForm.carStyleName" @tap="!isDisabled&&(carStyleShow=true)" />
      </u-form-item>
      <u-form-item label="车辆颜色" prop="carColorName" label-position="top" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" placeholder="请选择车辆颜色" :disabled="true" v-model="carForm.carColorName" @tap="!isDisabled&&(carColorShow=true)" />
      </u-form-item>
      <u-form-item label="特征" prop="carFeature" label-position="top">
        <u-input type="textarea" height="100" :auto-height="true" placeholder="请输入特征" :disabled="isDisabled" v-model="carForm.carFeature" />
      </u-form-item>
      <u-form-item label-position="top" label="备注">
        <u-input type="textarea" height="100" :auto-height="true" placeholder="请输入" :disabled="isDisabled" v-model="carForm.remark" />
      </u-form-item>
      <u-form-item label="上传图片" label-position="top">
        <view class="zk-img-content">
          <m-upload
            :disabled="isDisabled"
            :deletable="true"
            :maxCount="picIds"
            width="150rpx"
            height="150rpx"
            :file-list="fileList"
            :multiple="true"
            index="fileList"
            :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.c_case_car}"
            upApiUrl="uploadBase64ForApp"
            ref="filePicUpload"
            @on-list-change="changeUpload"
          >
          </m-upload>
        </view>
      </u-form-item>
    </u-form>
    <u-select :list="carStyleDict" v-model="carStyleShow" @confirm="hanlderChangeCarStyle"></u-select>
    <u-select :list="carColorDict" v-model="carColorShow" @confirm="hanlderChangeCarColor"></u-select>
  </view>
</template>

<script>
import mUpload from '@/components/m-upload.vue';
export default {
  components: {
    mUpload,
  },
  props: {
    carData: {
      type: Object,
      default: () => {},
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      errorType: ['border-bottom', 'message',],
      valueStyle: {
        marginRight: "5px",
      },
      carForm:{
        uuid: "",
        carNum: "",
        carColor: "",
        carColorName: "",
        carStyle: "",
        carStyleName: "",
        remark:"",
      },
      rules:{
        carNum: [
          {
            required: true,
            message: '请输入车牌号',
            trigger: ['change', 'blur',],
          },
          {
            validator: (rule, value) => {
              return !value || this.$u.test.carNo(value);
            },
            message: '车辆号码不正确',
            trigger: ['change','blur',],
          },
        ],
      },
      carStyleShow: false,
      carStyleDict: [],  // 车辆类型字典数据
      carColorShow: false,
      carColorDict: [],  // 车辆颜色字典数据
      fileList: [],
      picIds: '20',
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  onReady() {
    this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
  },
  mounted() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    Object.assign(this.carForm, this.carData, );
    this.fileList = this.carData.fileList ? this.carData.fileList : [];
    this.carStyleDict = this.$store.state.dicts['C_CAR_STYLE'];
    this.carColorDict = this.$store.state.dicts['C_CAR_COLOR'];
  },
  methods:{
    // 选择车辆类型
    hanlderChangeCarStyle(p) {
      this.carForm.carStyle = p[0].value;
      this.carForm.carStyleName = p[0].label;
    },
    // 选择车辆颜色
    hanlderChangeCarColor(p) {
      this.carForm.carColor = p[0].value;
      this.carForm.carColorName = p[0].label;
    },
    // 上传/删除图片事件
    changeUpload(list, key) {
      if (list.length > 0) {
        this.fileList = [...list,];
      } else {
        this.fileList = [];
      }
    },
    // 确认事件
    confirmBtn(){
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let fList = [];
          if(this.fileList.length > 0){
            this.fileList.forEach((item) => {
              fList.push({gfiId:item.gfiId,});
            });
          }
          this.carForm.fileList = fList;
          this.$emit("back", this.carForm);
          console.log('表单验证通过');
        }
      });
    },
    handlerBack() {
      this.$emit("back", null);
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
</style>
